<template>
    <div>
        <div class="header">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="账号名称">
                    <el-input v-model="searchForm.account" placeholder="请输入账号名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button @click="showAddAccount">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户名" prop="account">
            </el-table-column>
            <el-table-column label="等级" prop="level">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" title="新增">
            <el-form :model="acconutForm" label-width="120px">
                <el-form-item label="用户名称">
                    <el-input v-model="acconutForm.account" placeholder="请输入用户名称" clearable />
                </el-form-item>
                <el-form-item label="用户等级">
                    <el-input v-model="acconutForm.level" placeholder="请输入用户等级" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetDialog">取消</el-button>
                    <el-button type="primary" @click="addAccount">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
// 获取mock当中的api
import { getDataApi, addAccountApi, deleteAccountApi, updateAccountApi } from '../utils/mockServer/db'
import { ElMessage, ElMessageBox } from 'element-plus';

const { proxy: _this } = getCurrentInstance()
// 定义搜索表单内容
const searchForm = ref({
    account: ''
})

const DEFAU = 1

const dialogVisible = ref(false)

// 定义列表数据
const tableData = ref([])

// 获取全部数据
const getData = (account) => {
    tableData.value = getDataApi({ account })
    console.log(getDataApi({ account }));
}

getData()

const handleSearch = () => {
    getData(searchForm.value.account)
}

const acconutForm = ref({
    account: '',
    level: DEFAU
})

const showAddAccount = () => {
    dialogVisible.value = true

}

const addAccount = () => {
    const { account, level } = acconutForm.value
    const accountObj = {
        account,
        level
    }
    addAccountApi(accountObj)
    ElMessage({
        type: 'success',
        message: '添加成功',
    })

    resetDialog()
    handleSearch()

}
//删除
const handleDelete = (row) => {
    console.log('row',row);

    ElMessageBox.confirm(
        'proxy will permanently delete the file. Continue?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {

            deleteAccountApi(row)
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
            handleSearch()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })


        deleteAccountApi(row)
}








const resetDialog = () => {
    dialogVisible.value = false

    acconutForm.value.account = ''
    acconutForm.value.level = DEFAU
}

</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
}
</style>
